<template>
  <div id="container">
    <van-nav-bar title="创业平台" />
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in swiper_img" :key="index">
        <img :src="image" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-grid square>
      <van-grid-item
        v-for="(icon, index) in icons"
        :key="index"
        :icon="icon"
        :text="title[index]"
      />
    </van-grid>
    <van-tabs  @click="getRowList">
      <van-tab :title="tab.name" v-for="tab in tabList" :key="tab.id" :name="tab.id">
        <van-row v-for=" item in rowList" :key="item.id" @click="newsDetail(item.id)">
          <van-col span="14" offset="2">
            <h4>{{item.title}}</h4>
            <p>{{item.create_time}}</p>
          </van-col>
          <van-col span="8">
            <van-image
              width="100%"
              height="80%"
              fit="contain"
              :src="uploads+item.img"
            />
          </van-col>
        </van-row>
      </van-tab>
      
    </van-tabs>
   <bottom :active='0'></bottom>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Bottom from '@/components/Bottom.vue'

export default {
  components:{Bottom},
  data() {
    return {
      tabList:[],
      rowList:[],
      swiper_img: [
        require("../assets/imgs/banner1.png"),
        require("../assets/imgs/banner2.png"),
        require("../assets/imgs/banner3.png"),
      ],
    };
  },
  computed: {
    ...mapState({
      icons: (state) => state.girdList.src,
      title: (state) => state.girdList.title,
      uploads:(state)=>state.uploads
    }),
  },
  created(){
    this.initTab()
    this.getRowList(1)
  },

  methods: {
    async initTab(){
      const {data:res}=await this.$http.get(this.HOST+'/news/getnewstype')
      this.tabList=res.data
    },
    async getRowList(name){
      const {data:res}=await this.$http.get(this.HOST+'/news/getnews?type_id='+name)
      this.rowList=res.data
    },
    newsDetail(id){
      this.$router.push('/newsdetail/'+id)
    }
  },
};
</script>

<style lang="scss" scoped>
#container >>> .van-nav-bar__title {
  font-size: 20px;
}
.van-swipe-item >>> img {
  width: 100%;
}
>>>.van-col--16{
  text-align: left;
}
>>>.van-row{
  border-bottom: 1px solid aqua;
}
>>>.van-image__img{
  margin-top: 5px;
}
>>>.van-tabs__content{
  margin-bottom: 50px;
}
</style>